import { useContext, useEffect, useState } from "react";
import Friender from "./Friender";
import { WebsiteContext } from "../../contexts/Website";
import { UserAddOutlined, UsergroupAddOutlined } from "@ant-design/icons";
import { MemberContext } from "../../contexts/Member";
import Apply from "./Apply";

export default function Friend() {
    const { setWebsite } = useContext(WebsiteContext);
    const { friends, applies } = useContext(MemberContext);
    const [open, setOpen] = useState(false);

    useEffect(() => {
        setWebsite({title: '朋友'});
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    let applyNumber = 0;
    (applies || []).map((item) => applyNumber += (item.status === 1) ? 1 : 0);

    // const friends: any[] = [];
    return <div className="flex flex-col bg-gray-100 min-h-full">
        <div className="divide-y">
            <div className="flex gap-4 p-4 items-center bg-white" onClick={() => setOpen(true)}>
                <div className="w-8 h-8 bg-orange-500 text-white text-2xl rounded flex items-center justify-center">
                    <UserAddOutlined />
                </div>
                <div className="flex-1 flex gap-4 items-center">
                    <div>新的朋友</div>
                    {
                        applyNumber
                            ? <div className=" px-2 -top-2 -right-2 rounded-full bg-red-500 text-white text-sm">+ {applyNumber}</div>
                            : <></>
                    }
                </div>
            </div>
            <div className="flex gap-4 p-4 items-center bg-white">
                <div className="w-8 h-8 bg-green-500 text-white text-2xl rounded flex items-center justify-center">
                    <UsergroupAddOutlined />
                </div>
                <div>群聊</div>
            </div>
        </div>

        <div className="px-4 py-2 text-sm text-gray-500">朋友</div>
        <div className="divide-y">
            <div className="flex flex-col divide-y bg-white">
                {
                    (friends || []).map((friend) => <Friender key={friend.chatId} member={friend} />)
                }
            </div>
        </div>
        <div className="p-4 text-center text-sm">
            {
                (friends || []).length
                    ? <>{(friends || []).length}个朋友</>
                    : <>你还没有朋友哦，单身汪。</>
            }
        </div>

        <Apply open={open} onClose={() => setOpen(false)} />
    </div>;
}
